<template>
    <div class="selectProvince">
        <div class="choiceProvince">
            <el-select v-model="provinceValue" class="m-2" placeholder="全部" size="small" @change="changeProvinceHandle"
                :clearable="true">
                <el-option v-for="item in provinceOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <div class="choiceCity">
            <el-select v-model="cityValue" class="m-2" placeholder="全部" size="small" @change="changeCityHandle"
                :clearable="true">
                <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
    </div>
</template>

<script setup lang="ts">
import service from '@/utils/service';
import type { AxiosResponse } from 'axios';
import { ref, reactive, watch } from 'vue';

// 选择省市
const provinceValue = ref('')
const cityValue = ref('')
// 省选择框
interface Iprovince {
    value: string,
    label: string
}
const provinceOptions: Iprovince[] = reactive([])
const getProvinces = async () => {
    let res = await service({
        url: `/provinces`,
    })
    if (res.data) {
        res.data.forEach((item: any) => {
            provinceOptions.push({
                value: item.province,
                label: item.province
            })
        })
        provinceOptions.unshift({
            value: "全部",
            label: "全部"
        })
    }
}
getProvinces()
const changeProvinceHandle = (val: string) => {

    service({
        url: `/provinces`,
        params: {
            province: val
        }
    }).then((res: AxiosResponse) => {

        if (res.data.length != 0) {
            let cityArr = res.data[0].city
            cityOptions.length = 0
            cityOptions.push({
                value: "全部",
                label: "全部"
            })
            cityArr.forEach((item: any) => {
                cityOptions.push({
                    value: item.cityName,
                    label: item.cityName
                })
            })
            cityValue.value = cityOptions[0].value
        } else {
            cityOptions.length = 0
            cityOptions.push({
                value: "全部",
                label: "全部"
            })
            cityValue.value = cityOptions[0].value
        }
    })
}
// 市选择框
interface Icity {
    value: string,
    label: string
}
const emit = defineEmits(["change", "select"])
const cityOptions: Icity[] = reactive([])
const changeCityHandle = () => {
    emit("change", provinceValue.value, cityValue.value)
}
watch([provinceValue, cityValue], () => {
    emit("select", provinceValue.value, cityValue.value)
})
defineExpose({
    provinceValue,
    cityValue,
})
</script>

<style scoped>
.selectProvince {
    display: flex;
    align-items: center;
}

.selectProvince>div {
    width: 100px;
    height: 35px;
    border: 1px solid #e9e9e9;
    display: flex;
    align-items: center;
}

.selectProvince .choiceProvince {
    padding: 0 2px;
}

.bx .bottom-box .selectProvince .choiceCity {
    padding: 0 2px;
    margin-left: 5px;
}
</style>